<template>
	<div class="seller" ref="seller">
		<div class="seller-content">
			<div class="overview">
				<h1 class="title">{{seller.name}}</h1>
				<div class="desc">
					<star :size="36" :score="seller.score"></star>
					<span class="text">({{seller.ratingCount}})</span>
					<span class="text">月售{{seller.sellCount}}单</span>
				</div>
				<ul class="remark">
					<li class="block">
						<h2>起送价</h2>
						<div class="content">
							<span class="stress">{{seller.minPrice}}</span>元
						</div>
					</li>
					<li class="block">
						<h2>商家配送</h2>
						<div class="content">
							<span class="stress">{{seller.deliveryPrice}}</span>元
						</div>
					</li>
					<li class="block">
						<h2>平均配送时间</h2>
						<div class="content">
							<span class="stress">{{seller.deliveryTime}}</span>元
						</div>
					</li>
				</ul>
				<div class="favorite" @click="toggleFavorite">
					<span class="icon-favorite" :class="{'active': favorite}"></span>
					<span class="text">{{favoriteText}}</span>
				</div>
			</div>
			<split></split>
			<div class="bulletin">
				<h1 class="title">公告与活动</h1>
				<div class="content-wrapper">
					<p class="content">{{seller.bulletin}}</p>
				</div>
				<ul v-if="seller.supports" class="suppourts">
					<li class="support-item" v-for="(item, index) in seller.supports" :key="index">
						<span class="icon" :class="classMap[item.type]"></span>
						<span class="text">{{item.description}}</span>
					</li>
				</ul>
			</div>
			<split></split>
			<div class="pics">
				<h1 class="title">商家实景</h1>
				<div class="pic-wrapper" ref="picwrapper">
					<ul class="pic-list" ref="piclist">
						<li class="pic-item" v-for="pic in seller.pics">
							<img :src="pic" width="120" height="90">
						</li>
					</ul>
				</div>
			</div>
			<split></split>
			<div class="info">
				<h1 class="title">商家信息</h1>
				<ul>
					<li class="info-item" v-for="info in seller.infos">
						{{info}}
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
	import star from 'components/star/star.vue';
	import split from 'components/split/split.vue';
	import BScroll from 'better-scroll';
	import {saveToLocal, loadFromLocal} from '../../common/js/store.js';
	export default {
		data() {
			return {
				favorite: (() => {
					return loadFromLocal(this.seller.id, 'favorite', false);
				})()
			};
		},
		props: {
			seller: {
				type: Object
			}
		},
		components: {
			star,
			split
		},
		computed: {
			favoriteText() {
				return this.favorite ? '已收藏' : '收藏';
			}
		},
		created() {
			this.classMap = ['decrease', 'discount', 'guarantee', 'special', 'invoice'];
		},
		mounted() {
			// console.log(this.seller);
			this._initScroll();
			this._initPicScroll();
		},
		watch: {
			'seller'() {
				this._initScroll();
				this._initPicScroll();
			}
		},
		methods: {
			_initScroll() {
				this.$nextTick(() => {
					if (!this.scroll) {
						this.scroll = new BScroll(this.$refs.seller, {
							click: true
						});
					} else {
						this.scroll.refresh();
					}
				});
			},
			_initPicScroll() {
				this.$nextTick(() => {
					if (this.seller.pics) {
						let picWidth = 120;
						let margin = 6;
						let width = (picWidth + margin) * this.seller.pics.length - margin;
						this.$refs.piclist.style.width = width + 'px';
						this.$nextTick(() => {
							if (!this.picScroll) {
								this.picScroll = new BScroll(this.$refs.picwrapper, {
									scrollX: true,
									eventPassthrough: 'vertical'
								});
							} else {
								this.picScroll.refresh();
							}
						});
					}
				});
			},
			toggleFavorite(event) {
				if (!event._constructed) {
					return;
				}
				this.favorite = !this.favorite;
				saveToLocal(this.seller.id, 'favorite', this.favorite);
			}
		}
	};
</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import '../../common/stylus/mixin.styl';
	.seller
		position absolute
		top 174px
		bottom 0px
		left 0px
		width 100%
		overflow hidden
		.overview
			padding 18px
			position relative
			.title
				margin 0 0 8px
				line-height 14px
				color rgb(7, 17, 27)
				font-size 14px
			.desc
				padding-bottom 18px
				font-size 0
				border-1px(rgba(7, 17, 27, .1))
				.star
					display inline-block
					margin-right 8px
					vertical-align top
				.text
					display inline-block
					line-height 18px
					margin-right 12px
					font-size 10px
					color rgb(77, 85, 93)
			.remark
				display flex
				padding-top 18px
				.block
					flex 1
					text-align center
					border-right 1px solid rgba(7, 17, 27, .1)
					&:last-child
						border none
					h2
						margin 0 0 4px
						line-height 10px
						font-size 10px
						color rgb(147, 153, 159)
					.content
						line-height 24px
						font-size 10px
						color rgb(7, 17, 27)
						.stress
							font-size 24px
			.favorite
				position absolute
				right 10px
				top 18px
				width 34px
				font-size 0
				text-align center
				.icon-favorite
					display block
					margin 0 auto 4px
					font-size 24px
					line-height 24px
					color #D4D6D9
					&.active
						color rgb(240, 20, 20)
				.text
					line-height 10px
					font-size 10px
					color rgb(77, 85, 93)
		.bulletin
			padding 18px 18px 0
			.title
				margin 0 0 8px
				line-height 14px
				color rgb(7, 17, 27)
				font-size 14px
			.content-wrapper
				padding 0 12px 16px 12px
				border-1px(rgba(7, 17, 27, .1))
				.content
					line-height 24px
					font-size 12px
					color rgb(240, 27, 27)
			.suppourts
				.support-item
					padding 16px 12px
					border-1px(rgba(7, 17, 27, .1))
					font-size 0px
					&:last-child:after
						border none
					.icon
						display inline-block
						vertical-align top
						width 16px
						height 16px
						margin-right 6px
						background-size cover
						background-repeat no-repeat
						&.decrease
							bg-img(decrease_4)
						&.discount
							bg-img(discount_4)
						&.invoice
							bg-img(invoice_4)
						&.special
							bg-img(special_4)
						&.guarantee
							bg-img(guarantee_4)
					.text
						font-size 12px
						line-height 16px
						color rgb(240, 27, 27)
		.pics
			padding 18px
			.title
				margin 0 0 8px
				line-height 14px
				color rgb(7, 17, 27)
				font-size 14px
			.pic-wrapper
				margin 0 -18px
				overflow hidden
				white-space nowrap
				.pic-list
					margin-left 18px
					font-size 0
					.pic-item
						display inline-block
						margin-right 6px
						width 120px
						height 90px
						&:last-child
							margin 0
		.info
			padding 18px 18px 0
			color rgb(7, 17, 27)
			.title
				padding-bottom 12px
				line-height 14px
				font-size 14px
				border-1px(rgba(7, 17, 27, .1))
			.info-item
				padding 16px 12px
				line-height 16px
				border-1px(rgba(7, 17, 27, .1))
				font-size 12px
				&:last-child:after
					border none
</style>